<template>
  <div class="tab">
    <div class="tab-header">
      <h1 class="title">{{ item.title }}</h1>
      <el-space>
        <el-tag @mouseenter="activeIndex = i" :effect="activeIndex === i ? 'dark' : 'plain'" size="large"
          v-for="(v, i) in item.children" :key="i">{{ v.title }}</el-tag>
      </el-space>
    </div>
    <div class="btm">
      <div class="btm-prefix">
        <slot></slot>
      </div>
      <div class="banner">
        <!-- <el-carousel indicator-position="outside">
        <el-carousel-item v-for="({url}, i) in images" :key="i" style="width: 300px;"> 
          <img :src="url" alt="" width="246" height="375">
        </el-carousel-item>
      </el-carousel> -->
        <swiper class="swiper" slidesPerView="auto" :modules="modules" navigation>
          <swiper-slide class="swiper-slide" v-for="({ url }, i) in images" :key="i">
            <img :src="url" alt="" width="246" height="375">
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import type { TabItemState } from '@/types';
import { ref, computed, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination } from 'swiper/modules'
import 'swiper/css';
import 'swiper/css/navigation';
const modules = [Navigation, Pagination]

const props = defineProps<{ item: TabItemState }>()
const activeIndex = ref(0);
const images = computed(() => {
  return props.item.children[activeIndex.value].images
})

</script>

<style scoped lang="scss">
.tab {
  .tab-header {
    display: flex;
    align-items: center;

    .title {
      margin-right: 20px;
      width: 300px;
      white-space: nowrap;
    }
  }

  .btm {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin: 10px 0;
    .btm-prefix {
      flex-shrink: 0;
    }

    .banner {
      flex: 1;
      width: 100%;
      overflow: hidden;
    }
  }
}

.swiper-slide {
  height: 400px;
  width: 270px;
}
</style>